<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <td>选中</td>
                <td>图片</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </thead>
            <tbody>
                <tr v-for="(e,index) in fruitList" :key="e.id">
                    <td><input type="checkbox" name="" id="" v-model="e.isChecked"></td>
                    <td><img :src="e.img" alt="" srcset=""></td>
                    <td>{{e.price}}</td>
                    <td><button :disabled="e.num <= 1" @click="sub(e.id)">-</button> {{e.num}}&nbsp; <button @click="add(e.id)">+</button> </td>
                    <td>{{e.price * e.num}}</td>
                    <td><input type="button" @click="del(e.id)" value="删除"> </td>
                </tr>

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4"> <input type="checkbox" name="" id="" v-model="isAll">全选</td>
                    <td colspan="1"> 总价：{{totalAccount}}</td>
                    <td colspan="1"> 结算（{{totalNum}}）</td>
                </tr>
            </tfoot>
        </table>


    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
     <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                fruitList:[
                    {id:1,isChecked:true,name:'火龙果',num:1,price:20.5,img:'./火龙果.png'},
                    {id:12,isChecked:false,name:'苹果',num:1,price:1,img:'./苹果.png'},
                    {id:13,isChecked:true,name:'猕猴桃',num:10,price:10,img:'./猕猴桃.png'},

                ],
            },
            methods:{
                del(id) {
                    this.fruitList = this.fruitList.filter(e => e.id !== id)
                },
                add(id) {
                    this.fruitList.forEach(e => {
                        if(e.id == id) {
                            e.num++;
                        }
                    });
                },
                sub(id) {
                    const fruit = this.fruitList.find(e => e.id == id)
                    fruit.num--;
                },
            },
            computed:{
                // 有计算的时候使用
                totalNum(){
                    var count = 0;
                    this.fruitList.forEach(e =>  {
                        if(e.isChecked) {
                            count += e.num
                        }
                    })
                    return count;
                },
                totalAccount(){
                    var account = 0;
                    this.fruitList.forEach(e => {
                        if(e.isChecked) {
                             account += e.num * e.price
                        }
                    })
                    return account;
                },
                isAll:{
                    deep:true,
                    get(){
                        const notCheckedList = this.fruitList.filter(e=> !e.isChecked)
                        return notCheckedList.length == 0 ? true : false;
                        // const t = this.fruitList.every(e=> e.isChecked)
                        // return t;
                        
                    },
                    set(newValue){
                         this.fruitList.forEach(e => e.isChecked = newValue)
                    }
                }
            },
            watch:{
                // 完整版 需要通过set get 方法
                
            }
        })

    </script>

    <style>
        table {
            border-collapse: collapse;
            width: 30%;
        }
        th,td {
            border: 1px solid #ddd;
        }
    </style>
</body>
</html>